<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--通过表达式获取vue绑定的数据 -->
    <span style="color:red;">{{ message }}</span><br>

    <!--通过v-bind绑定数据 -->
    <span v-bind:title="bindTitle">展示title信息</span><br>
    <input v-bind:value="inData" /><br>

    <!-- if条件语句 -->
    <h1 v-if="show1">没有展现的hl</h1>
    <h1 v-if="show2">展现后的hl</h1>
    <h1 v-if="intShow==1">数值判断的hl</h1>
    <h2 v-if="intShow==2">数值判断的h2</h2>

    <template v-if="show2">
        <h1 style="color: red"><a>if 展示</a></h1>
    </template>
    <div v-show="show1">
        <h1 style="color: red"><a>show1 展示</a></h1>
    </div>
    <div v-show="show2">
        <h1 style="color: red"><a>show2 展示</a></h1>
    </div>

    <!-- v-show template 渲染无效-->
    <template v-show="show1">
        <h1 style="color: red"><a>show1 template 展示</a></h1>
    </template>
    <template v-show="show2">
        <h1 style="color: red"><a>show2 template 展示</a></h1>
    </template>

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
        <input placeholder="password" type="password" key="username-pass">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
        <input placeholder="password" type="password" key="email-pass">
    </template>



    <button onclick="changeLoginType();">切换登录类型</button>

    <!--for 循环展现-->
    <ol>
        <li v-for="forItem in forItems"> {{forItem}} </li>
        <!--多层次元素生成有点问题-->
        <template  v-for="forItem in forItems"> <a></a><li>{{forItem}}</li></a> </template >
    </ol>

    <!-- 绑定点击事件-->
    消息:<span>{{buttonMsg}}</span><br>
    <button v-on:click="reverseMessage">逆转消息</button><br>

    <!--数据双向绑定 v-model -->
    <p>{{vmodelMsg}}</p><br>
    <input v-model="vmodelMsg" /><br>


</div>
<script>
    var vm = new Vue({
        /**需要通过vue绑定数据的容器**/
        el: '#app',
        /**绑定的数据集**/
        data: {
            message: 'Hello Vue!',
            bindTitle:'this is title',
            inData:'input value',
            show1:false,
            show2:true,
            intShow:1,
            forItems:['forItem1','forItem2','forItem3','forItem4'],
            buttonMsg:'初始化消息',
            vmodelMsg:'vmodelMsg',
            loginType:'username'
        },
        /**数据处理方法**/
        methods:{
            reverseMessage:function(){
                this.	buttonMsg = this.buttonMsg.split('').reverse().join('')
            }
        }
    });
    function changeLoginType() {
        if (vm.loginType ==='username'){
            vm.loginType = 'email';
        }else{
            vm.loginType ='username';
        }
    }
</script>
</body>
</html>